import { useEffect, useRef } from "react";
import Header from "../../components/Header";
import { useNavigate } from 'react-router-dom';
// import company from "../../assets/imgs/company.jpg";
// 扩展window对象类型
declare global {
    interface Window {
        BMapGL: any;
    }
}
// 公司地址信息
const Address = () => {
    const navigate = useNavigate();
    const mapRef = useRef(null);
    useEffect(() => {
        if (!window.BMapGL) {
            return;
        }
        const map = new window.BMapGL.Map(mapRef.current); // 对于百度地图WebGL版本，使用BMapGL


        const geocoder = new window.BMapGL.Geocoder(); // 注意WebGL版本使用BMapGL命名空间
        geocoder.getPoint("澄城县海泰电子材料有限责任公司", (point: any) => {
            if (point) {
                map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                // var content = "澄城县海泰电子材料有限责任公司";
                // var label = new window.BMapGL.Label(content, {       // 创建文本标注
                //     position: point,                          // 设置标注的地理位置
                //     offset: new window.BMapGL.Size(10, 20)           // 设置标注的偏移量
                // })
                // label.setStyle({                              // 设置label的样式
                //     color: '#000',
                //     fontSize: '14px',
                //     border: 'none'
                // })
                // map.addOverlay(label);

                var marker = new window.BMapGL.Marker(point);        // 创建标注   
                map.addOverlay(marker);
            } else {
                console.log('未找到地址');
            }
        }, "渭南"); // 第三个参数是城市名，用于提高解析速度和精度


        // // 添加小箭头图标到地图上
        // const myIcon = new window.BMapGL.Icon(<LocationOutline style={{transform: 'translate(-50%, -100%)'}} />, new window.BMapGL.Size(32, 37)); // 设置小箭头的图标和大小
        // const marker = new window.BMapGL.Marker(point, { icon: myIcon });  // 创建标注，同时设置图标
        // map.addOverlay(marker);  // 将标注添加到地图中
    }, []);
    return (

        <div className="contact-container">
            <Header
                title="联系我们"
                showBack={true}
                onBack={() => navigate(-1)}
            />
            <div style={{ padding: '16px' }}>
                <h2>公司地址</h2>
                <div ref={mapRef} style={{ width: '100%', height: '500px' }}></div>
                {/* <img style={{ width: '100%', marginTop: '16px' }} src={company} alt="公司地址" /> */}
            </div>
        </div>
    );
}

export default Address;